import React, { memo, useState } from "react";
import { useSelector, shallowEqual } from "react-redux";
import { useHistory } from "react-router-dom";
import { Pagination } from "antd";
import { Aesatheticleftwrap } from "./style";
export default memo(function Aesatheticleft() {
  const [min, setMin] = useState(0);
  const history = useHistory();
  const { blog } = useSelector(
    (store) => ({
      blog: store.newhomestore.blog,
    }),
    shallowEqual
  );

  const onChange = (page) => {
    setMin((page - 1) * 7);
  };
  return (
    <Aesatheticleftwrap>
      <div className="alltitle">您当前的位置:唯美语录</div>
      {blog.length > 0 &&
        blog.slice(min, min + 7).map((item, index) => {
          return (
            <div className="item" key={item.bgid}>
              <div
                className="title"
                onClick={(e) => {
                  history.push(`/home/aesthetic/aesathedetail/${item.bgid}`);
                }}
              >
                {item.title.slice(0, 10) + "..."}
              </div>
              <div className="detail">
                <span>发布时间:{item.releaseDate}</span>
                <span>作者:{item.nickName}</span>
                <span>分类:[{item.typeName}]</span>
                <span>点击量{item.clickHit}</span>
              </div>
              <div className="content1">
                <img className="img1" src={item.pic} alt="" />
                <div className="right">
                  {item.summary.slice(0, 120) + "..."}
                </div>
              </div>
              <div
                className="bottom"
                onClick={(e) => {
                  history.push(`/home/aesthetic/aesathedetail/${item.bgid}`);
                }}
              >
                详情信息
              </div>
            </div>
          );
        })}
      <div className="page">
        <Pagination
          pageSize={7}
          onChange={onChange}
          total={blog && blog.length}
        />
      </div>
    </Aesatheticleftwrap>
  );
});
